export const Cards = ({ ...props }) => (
  <section py="8|12" {...props}>
    <Container>
      <Grid col="1|2|3" mt="8|10|12" gap="4|6|8">
        <Card
          url="https://reflexjs.org/learn"
          icon="book"
          heading="Tutorials"
          description="Read the quick-start tutorials."
        />
        <Card
          url="https://reflexjs.org/docs"
          icon="book-open"
          heading="Documentation"
          description="Read the Reflex docs."
        />
        <Card
          url="https://reflexjs.org/library/blocks"
          icon="grid"
          heading="Blocks"
          description="Browse the blocks library."
        />
      </Grid>
    </Container>
  </section>
)

export const Card = ({ icon, heading, description, url, ...props }) => (
  <Flexbox
    flexDirection="column"
    textAlign="center"
    borderWidth="1px"
    rounded="lg"
    p="4|6|8"
    position="relative"
    {...props}
    _hover={{
      borderColor: "primary",
    }}
  >
    <Link
      href={url}
      position="absolute"
      w="full"
      h="full"
      top="0"
      target="_blank"
      rel="noopener"
    >
      <VisuallyHidden>{heading}</VisuallyHidden>
    </Link>
    <Flexbox
      bg="primary"
      color="white"
      rounded="full"
      size="16"
      alignItems="center"
      justifyContent="center"
    >
      <Icon name={icon} size="6" />
    </Flexbox>
    <h3 variant="heading.h3" fontSize="2xl" mt="4|6" mb="0">
      {heading}
    </h3>
    <p mb="0" mt="2">
      {description}
    </p>
  </Flexbox>
)
